<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 数据
const info = reactive({
  barHeight: 0, // 状态栏高度
  navHeight: 0, // 导航栏高度
})
// 获取手机状态栏高度
onLoad(() => {
  //获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
  let { statusBarHeight } = uni.getSystemInfoSync()
  info.barHeight = statusBarHeight
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  info.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
})

// 查看订单
const lookOrder = () => {
  // uni.navigateTo({
  //   url: '/pages/order/orderList'
  // })
}
// 返回
const back = () => {
  uni.navigateBack()
}
</script>

<template>
  <view class="payResult-page">
    <!-- 导航栏 -->
    <view class="navber" :style="{ 'padding-top': info.barHeight + 'px' }">
      <view class="title-box" :style="{ 'height': info.navHeight + 'px' }">
        <text>支付结果</text>
      </view>
    </view>
    <!-- 支付结果信息 -->
    <view class="payResult-content-box">
      <image style="width: 500rpx; height: 500rpx;" src="/static/images/pay_success.png" mode="scaleToFill" />
      <text>支付成功</text>
    </view>
    <!-- 按钮 -->
    <view class="btn-box">
      <up-button text="查看订单" :plain="true" @click="lookOrder"></up-button>
      <up-button text="返回" :plain="true" @click="back"></up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.payResult-page {

  // 导航栏
  & .navber {
    & .title-box {
      display: flex;
      align-items: center;
      justify-content: center;

      & text {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
      }
    }
  }

  // 支付结果信息
  & .payResult-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 120rpx;

    & text {
      font-weight: 500;
      font-size: 36rpx;
      color: #333333;
    }
  }

  // 按钮
  &::v-deep .btn-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx;
    margin-top: 150rpx;

    & .u-button {
      width: 334rpx;
      height: 100rpx;
      border-radius: 10rpx;
      border: 2rpx solid #333333;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }
  }
}
</style>